<script setup lang="ts">
import {ref} from "vue";

const activeKey = ref('1')
</script>

<template>
  <div class="message">
    <a-card style="height: 8.2%;margin-bottom: 1.4%">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="全部"></a-tab-pane>
        <a-tab-pane key="2" tab="评论"></a-tab-pane>
        <a-tab-pane key="3" tab="点赞"></a-tab-pane>
        <a-tab-pane key="5" tab="关注"></a-tab-pane>
        <a-tab-pane key="6" tab="系统通知"></a-tab-pane>
      </a-tabs>
    </a-card>
    <a-card style="height: 80%;margin-bottom: 1.4%;display: flex;align-items: center;justify-content:center;">
      <a-empty />
    </a-card>
    <a-card
        body-style="display:flex;box-sizing:border-box;height:100%;align-items:center;justify-content:space-between;"
        style="height: 8.2%">
      <div class="left">
        <div class="content">
          <a-button style="margin-right: 10px" danger >清空历史</a-button>
          <div class="content">共3条记录</div>
        </div>
      </div>
      <div class="right">
        <a-checkbox>全选</a-checkbox>
      </div>
    </a-card>
  </div>
</template>
<style scoped lang="scss">
.message{
  height: 100%;
  width: 100%;
  .left{
    flex: 1;
    .content{
      font-size: 16px;
      color: rgb(112, 119, 133);
      display: flex;
      align-items: center;
    }
  }
  .right{
    flex: 1;
    display: flex;
    justify-content: right;
  }
}
</style>